<template xmlns:v-slot="http://www.w3.org/1999/xlink">
  <view slot="page-body">
    <StatusNav :properties="statusNavProperties"/>
    <view class="wrapper" style="z-index:5">

      <view class="product-view">
        <view class="money-view">
          <view class="money">
            <text :style="{color:themConfig.theme.color}" class="symbol">¥</text>
            <text :style="{color:themConfig.theme.color}" class="mnoeyvalue">{{ product.price }}</text>
          </view>
          <view class="view-count">
            发布于{{ product.time }}
          </view>
          <view class="view-count">
             {{ product.viewCount }} 次浏览
          </view>
        </view>

        <view class="desc">
          <view class="product-name">
            {{ product.productName }}
          </view>
          <view class="content-desc">
            <RichText :content="product.description"/>
          </view>
        </view>

        <view class="product-images">
          <view v-for="(item, index) in product.images">
            <img v-if="product.images.length>1" @click="showLagerImg(item,product.images)"
                 :class="['imageClass-one', 'imageClass', index === 0 ? 'first-image' : '', index === product.images.length - 1 ? 'last-image' : '']"
                 width="100%" mode="scaleToFill"
                 :src="item"/>

            <img v-else @click="showLagerImg(item,product.images)"
                 class="only-one"
                 width="100%" mode="scaleToFill"
                 :src="item"/>
          </view>
        </view>
      </view>
      <uv-gap height="40"></uv-gap>
      <view class="bottome-view">
        <view class="actions">
          <view @click="copyLick" style="margin: 0 20rpx;">
            <uv-icon size="25" name="share"></uv-icon>
          </view>
          <view style="width: 83%">
            <uv-button text="联系对方" shape="circle" @click="showConcatInfo"
                       :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"></uv-button>
          </view>
        </view>
      </view>
    </view>
    <view class="popupUserInfo">
      <uv-popup
          ref="actionSheet"
          mode="bottom"
          :round="1"
          :safeAreaInsetBottom="true"
          :closeOnClickOverlay="false"
          :closeOnClickAction="false"
          @close="closeUserInfo">

        <template v-slot>
          <view class="title">发布人信息</view>
          <view class="user-info">
            <view style="display: flex;align-items: center">
              <uv-icon name="phone-fill"   size="20"></uv-icon>
              电话：{{ product.user.userPhone }}
              <uv-icon @click="call(product.user.userPhone)" name="phone" style="margin-left: 20px" size="23"></uv-icon>
            </view>
            <view style="display: flex;align-items: center">
              <uv-icon name="weixin-fill" size="25"></uv-icon>
              微信：{{ product.user.wechatId || '无' }}
              <uv-icon v-if="product.user.wechatId" @click="copyWechat(product.user.wechatId)" style="margin-left: 20px" name="order" size="23"></uv-icon>
            </view>
          </view>
          <uv-gap height="5" bgColor="#ebebeb"></uv-gap>
          <view @click="coloseConcatInfo" class="cancel-btn">
            取消
          </view>
        </template>

      </uv-popup>
    </view>
    <FloatingBackHome/>
  </view>

</template>
<script>

import {mixins} from './index.js'

export default {
  components: {},
  mixins: [mixins]
}
</script>
<style scoped lang="scss">
@import './index.scss';

::v-deep .sku-item .uv-button {
  //padding: 30px !important;
  height: auto !important;
}

.wrapper{
  background-color: white !important;
}
</style>
